<template>
  <div>
    <h3>App</h3>
    <NavBar>
      <!-- # 是 v-slot 简写 -->
      <!-- 具名插槽 -->
      <template #left>
        <div>左侧</div>
      </template>

      <!-- 默认插槽 -->
      <template v-slot:default>
        <div>中间</div>
      </template>
      
      <!-- 具名插槽 -->
      <template #right>
        <div>右侧</div>
      </template>
    </NavBar>

    <NavBar>
      <!-- # 是 v-slot 简写 -->
      <!-- 具名插槽 -->
      <template #left>
        <div>左侧</div>
      </template>

      <!-- 具名插槽 -->
      <template v-slot:middle>
        <div>中间</div>
      </template>
      
      <!-- 具名插槽 -->
      <template #right>
        <div>右侧</div>
      </template>
    </NavBar>

    <NavBar>
      <!-- # 是 v-slot 简写 -->
      <!-- 具名插槽 -->
      <template #left="slotProps">
        <div>{{ slotProps.rice }}</div>
      </template>

      <!-- 具名插槽 -->
      <template v-slot:middle="slotProps">
        <div>{{ slotProps.beef }}</div>
      </template>
      
      <!-- 具名插槽 -->
      <template #right="slotProps">
        <div>{{ slotProps.noodles }}</div>
      </template>
    </NavBar>
  </div>
</template>

<script setup>
import NavBar from './NavBar.vue';
</script>

<style lang="scss" scoped>
</style>